<template>
  <div class="rankbox">
    <div class="allrank">
      全部榜单
    </div>
    <div class="allcontent">
    <div class="bzrank">
      <!-- 必住榜单 -->
      <div class="itembz allrank" @click="goToplist">
        <img class='itembzimg'
           src="https://source.qunarzz.com/site/images/zhuanti/huodong/2bizhubang2x.png"
          alt=""
        />
        必住榜单
      </div>
    </div>
     <div class="bzimg" @click="goToplist">
        <div >
          <img class="hotel-rank" src="https://source.qunarzz.com/site/images/zhuanti/huodong/fuwuzuijia2x.png" alt="">
          <p>服务至上酒店榜</p>
        </div>
        <div>
          <img class="hotel-rank"  src="https://source.qunarzz.com/site/images/zhuanti/huodong/huanjingzuijia2x.png" alt="">
          <p>环境优雅酒店榜</p>
        </div>
      </div>
    <!-- 销量榜单 -->
     <div class="saelrank bzrank">
      <div class="itembz ">
        <img class='itembzimg'
          src="https://source.qunarzz.com/site/images/zhuanti/huodong/2xiaoliangbang2x.png"
          alt=""
        />
        <span>销量榜单</span>
      </div>
     </div>
      <div class="bzimg">
        <div>
          <img class="hotel-rank" src="https://source.qunarzz.com/site/images/zhuanti/huodong/shushijiudian2x.png" alt="">
          <p>舒适型酒店榜</p>
        </div>
        <div>
          <img class="hotel-rank" src="https://source.qunarzz.com/site/images/zhuanti/huodong/gaodangjiudian2x.png" alt="">
          <p>高档型酒店榜</p>
        </div>
        <div>
          <img class="hotel-rank" src="https://himg1.qunarzz.com/imgs/201907/17/C.GsTyDt30_ND48LhZn720.jpg" alt="">
          <p>经济型酒店榜</p>
        </div>     
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "allrankpage",
  data() {
    return {};
  },
  components: {},
  methods: {
    goToplist(){
      this.$router.push({path:'/Toplist'})
    },
  },
};
</script>
<style scoped>
@import url("../../../style/base.css");
.rankbox{
   width: 100%;
   height: 100%;
   .allcontent{
      height: 100vh;
      padding-bottom: .88rem;
      overflow-y: scroll;
      overflow-x: hidden;
   }
    .allrank{
      width: 100%;
      height: 40px;
      font-weight: bold;
      text-align: center;
      line-height: 40px;
      font-size: 16px;
      color: #333;
      /* border-bottom: 1px solid #bdb5b5; */
    }
    .bzrank{
      width: 100%;
      display: flex;
        .itembz{
          width:100%;
          height: 40px;
          display: flex;
          align-items: center;
          font-size: 14px;
          padding: 0 0 20px 16px;
          .itembzimg{
            width: 21px;
            height:21px;
            margin-right: 10px;
          }
        }
    }
.bzimg{
  width: 100%;
  display:flex;
  margin: 0 0 .2rem .11rem;
  text-align: center;
    .hotel-rank{
      width: 110px;
      height: 72px;
      border-radius: 5px;
      margin: 0 5px 0 10px;
    }
}
.saelrank{
  margin-top: 10px;
}
}
</style>
